<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="hmg.common.CommonUtils"%>
<%@ page import="hmg.vo.BoardVO"%>
<%@ page import="java.util.List"%>
<%--
    JSP Name : jspName.jsp
    Description : 설명을 기술합니다.
    author Kim Hyung soo
    since 2012. 8. 29.
    version 1.0
    Modification Information
       since          author              description
    ===========    =============    ===========================
    2012. 8. 29.     Kim Hyung soo     최초 생성
--%>
<%
    List<BoardVO> vodList = (List<BoardVO>) request.getAttribute("VodList");

    String listType = CommonUtils.getParameter(request.getParameter("listType"), "0");
    String listID = CommonUtils.getParameter(request.getParameter("listID"), "0");
    String dispNo = CommonUtils.getParameter(request.getParameter("dispNo"), "0");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>영상갤러리 | 현대자동차그룹</title>
<meta name="description" content="현대자동차그룹 및 계열사 홍보 영상 소개" />
<meta name="keywords" content="현대자동차그룹 및 계열사 홍보 영상, 그룹홍보 영상, 계열사홍보 영상, 그룹홍보, 홍보영상, 영상, 동영상" />
<%@ include file="/WEB-INF/jsp/web/kor/include/header.jspf" %>
<script type="text/javascript" src="/hmg/js/web/kor/com/swfobject.js"></script>
<script type="text/javascript">
//<![CDATA[
var page = 1;
var listType = <%= listType %>;
var pageIsEnded = false;
var mobileKeyWords = new Array("iPhone", "iPad", "BlackBerry", "Android", "Windows CE", "LG", "MOT", "SAMSUNG", "SonyEricsson");

$(function() {
  $("#tab_" + listType).addClass("on");
  if (<%= listID %> != null && <%= listID %> != "")	fn_play_movie(<%= listID %>);

  var ind = "0";
  for (var word in mobileKeyWords){
		if (navigator.userAgent.match(mobileKeyWords[word]) != null){
			//mobile
			$(this).find(".photo_layOver").show().css({"top":"118px","opacity": ".8" });
			$(this).find(".bg").hide();
			$("#vodObj").remove();
      $("#tablet-broadcastView").show();
      $(".alterText").remove();
      $(".photo_layOpen").click(function(){
          $("#loading").hide();
      });
			var ind = '1'
			return false;
		} else if (navigator.userAgent.match(mobileKeyWords[word]) == null)		{
			//web
		  $(this).find(".photo_layOver").hide().css({"top":"162px","opacity": "1"}).stop(true, true);
      $(this).find(".bg").show();
    }
  }
  $(".photo_layOpen").live({
	    mouseover : function(){
	    	if (ind == 0){
	    		if (!$(this).find(".photo_layOver").is(':animated')){
	    			$(this).find(".photo_layOver").show().animate({"top":"118px", "opacity": ".8"}, 500);
	    		}
	    	}
	    },
	    mouseleave : function(){
	      if (ind == 0){
	      	$(this).find(".photo_layOver").animate({"top":"162px", "opacity": "1"}, 500, function(){
	      		$(this).hide();
	      	});
	      }
	    }
	});
});

function fn_chk_flash(){
	var playerVersion = swfobject.getFlashPlayerVersion();
  if (playerVersion.major == 0) {
    $("#vodObj").remove();
    $(".alterText").show();
  }
}

function fn_append_contents() {
    if (pageIsEnded == false) {
        page++;
        $.ajax({
            type:"post",
            url:"./AjaxVodList.do",
            data:({page:page, listType:listType}),
            success: function(data) { fn_append_contents_proc(data); }
        });
    }
}

function fn_append_contents_proc(data) {
  $(data).appendTo(".mgr_gallery ul").each(function() {
    var ind = "0";
		for (var word in mobileKeyWords){
			if (navigator.userAgent.match(mobileKeyWords[word]) != null){
				//mobile
				$(this).find(".photo_layOver").show().css({"top":"118px","opacity": ".8" });
				$(this).find(".bg").hide();
				$(this).find(".overlay_gallery").click(function(){
					fe_layPop();
				});
				var ind = '1'
				return false;
			} else if (navigator.userAgent.match(mobileKeyWords[word]) == null)		{
				//web
				$(this).find(".photo_layOver").hide().css({"top":"162px","opacity": "1"}).stop(true, true);
				$(this).find(".bg").show();
			}
		}
  });
}
function fn_play_movie(listID) {
    $("#movieLayer").html("");
    $.ajax({
        type:"post",
        url:"./AjaxPlayMovie.do",
        data:({listID:listID}),
        success: function(data) { fn_play_movie_proc(data); }
    });
}

function fn_play_movie_proc(data) {
    $("#movieLayer").html(data);
    fe_layPop(true);
    fn_chk_flash();
    $("#noticeWrap").css({"z-index":"-1"});
	  $("#footer").css({"z-index":"-2"});
	  $(".jspPane").css({"position":"static"});
}

//]]>
</script>
</head>
<body>
    <!--wrap-->
    <div id="wrap">
        <!-- skip navigation -->
        <div id="skipnavition">
            <a href="#gnb">메뉴바로가기</a><a href="#content">본문바로가기</a>
        </div>
        <!--// skip navigation -->

        <hr />

        <!-- header-->
        <%@ include file="/WEB-INF/jsp/web/kor/include/left.jspf" %>
        <!--//header-->

        <hr />

        <!--container-->
        <div id="container">
            <div class="scroll-pane scroll-pane">
                <!-- 공통 -->
                <div class="subTitle">
                    <div class="pageTitle">
                        <h2><img src="/hmg/images/web/kor/title/mgr_vod_Vod.gif" alt="영상갤러리" /></h2>
                        <p class="subCopy"><img src="/hmg/images/web/kor/title/mgr_vod_Vod_desc.gif" alt="인류사회의 꿈을 함께 실현합니다." /></p>
                    </div>

                    <div class="pageLocation">
                        <ul>
                            <li><a href="/hmg/web/kor/Main.do"><img src="/hmg/images/web/kor/common/location_home.gif" alt="홈"/></a></li>
                            <li><a href="/hmg/web/kor/mgr/GallerySubMain.do">갤러리</a></li>
                            <li class="nowPage"><a href="/hmg/web/kor/mgr/vod/VodList.do">영상갤러리</a></li>
                        </ul>
                    </div>
                </div>
                <!--//공통-->

                <!--contents-->
                <div id="content">
                    <!-- 내용 -->
                    <div class="vodGallery">
                        <div class="vodGallery_Tab">
                            <ul>
                                <li id="tab_0" class="tab01"><a href="./VodList.do"><span>전체보기</span></a></li>
                                <li id="tab_1" class="tab02"><a href="./VodList.do?listType=1"><span>그룹홍보</span></a></li>
                                <li id="tab_2" class="tab03"><a href="./VodList.do?listType=2"><span>그룹광고</span></a></li>
                                <li id="tab_3" class="tab04"><a href="./VodList.do?listType=3"><span>사회공헌</span></a></li>
                            </ul>
                        </div>

                        <div class="mgr_gallery">
                            <ul class="contain">
<%  if (vodList == null || vodList.size() == 0) { %>
                                </br><li class="photo_layOpen" style="text-align:center;width:100%;">등록된 게시물이 없습니다.</li>
<%
    }
    else {
        for (int idx = 0; idx < vodList.size(); idx++) {
            BoardVO vod = vodList.get(idx);

            String className = "";
            String liClassName = "";
            String thumbnail = vod.getThumbnailImage();

            if (idx == 0 || idx == 4 || idx == 6 || idx == 11 || idx == 12 || idx == 16) {
                className = " wide";
                thumbnail = vod.getThumbnailImage2();
            }

            if ((idx + 1) % 3 == 0)
                liClassName += " last";
%>
                            <li class="photo_layOpen<%= className %><%= liClassName %>" onclick="javascript:fn_play_movie(<%= vod.getListID() %>);">
                                <div class="overlay_gallery<%= className %>"><img src="<%= thumbnail %>" alt="" />
                                    <a href="#" class="playBg" ><span class="hidden">PLAY</span></a>
                                    <div class="photo_layOver<%= className %>">
                                        <p class="title" style="width:90%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"><%= vod.getTitle() %></p>
                                    </div>
                                    <div class="bg"></div>
                                </div>
                            </li>
<%
        }
    }
%>
                            </ul>
                        </div>
                    </div>
                    <!--// 내용 -->
                </div>
                <!--//contents-->
            </div>
        </div>
        <!--//container-->

        <!-- layer -->
        <div id="movieLayer" class="photo_layer"></div>
        <!-- /layer -->

        <hr />

        <!--footer-->
        <%@ include file="/WEB-INF/jsp/web/kor/include/footer.jspf" %>
        <!--//footer-->

        <hr />

        <!--notice-->
        <%@ include file="/WEB-INF/jsp/web/kor/include/notice.jspf" %>
        <!--//notice-->
    </div>
    <!--//wrap-->
</body>
</html>